<template>
  <a-layout style="min-height: 100vh">
    <SideMenu />
    <a-layout>
      <a-layout-header class="header" style="background: #fff; padding: 0">
        <a-dropdown class="logout">
          <template #overlay>
            <a-menu @click="handleMenuClick">
              <a-menu-item key="1">
                <UserOutlined />
                XXXXXX
              </a-menu-item>
              <a-menu-item key="2">
                <UserOutlined />
                YYYYYY
              </a-menu-item>
              <a-menu-item key="3">
                <LogoutOutlined />
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
          <div>
            <UserOutlined />
            用户名
          </div>
        </a-dropdown>
      </a-layout-header>
      <a-layout-content style="margin: 16px">
        <div>
          <a-breadcrumb :routes="routes">
            <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
              <router-link v-if="!item.disabled" :to="item.path">
                {{ item.title }}
              </router-link>
              <span v-else>
                {{ item.title }}
              </span>
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <div class="content">
          <router-view />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";
import { LogoutOutlined, UserOutlined } from "@ant-design/icons-vue";
import SideMenu from "@/components/Layout/SideMenu.vue";
import { useUserStore } from "@/store/user";
import { useRouter } from "vue-router";
import { HomeFilled } from "@ant-design/icons-vue";
import { RouteLocationMatched, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const userStore = useUserStore();

const handleMenuClick = (e: any) => {
  console.log(e);
  if (e.key === "3") {
    userStore.logout();
    router.push("/login");
  }
};
/**
 * 计算当前路由的面包屑导航列表
 *
 * 1. 从当前路由的匹配记录(route.matched)中过滤出需要显示的面包屑项
 * 2. 将路由信息转换为面包屑需要的格式
 */
const breadcrumbList = computed(() => {
  const matched = route.matched.filter((item: RouteLocationMatched) => item.meta?.breadcrumb !== false);
  return matched.map((item) => ({
    title: item.meta?.title || item.name,
    path: item.path,
    disabled: item.path === route.path,
  }));
});

onMounted(() => {});
</script>
<style scoped>
.header {
  position: relative;
  .logout {
    position: absolute;
    right: 20px;
  }
}

.content {
  background-color: #fff;
  width: 100%;
  /* height: 95%; */
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
}
</style>
